<template>
	<view class="address">
		<!-- 收货地址按钮 -->
		<view class="address-btn" v-if="JSON.stringify(address) === '{}'">
		  <button type="primary" class="btn" size="mini" @click="showAddress">选择收货地址+</button> 
		</view>
		
		<!-- 收货地址主体 -->
		<view class="address-item" @click="showAddress" v-else>
			<!-- 收货人姓名电话 -->
			<view class="top">
				<view class="name">姓名：{{address.userName}}</view>
				<view class="phone">电话：{{address.telNumber}} ></view>
			</view>
			<!-- 收货人地址 -->
			<view class="buttom">
				<view class="title">收货地址：</view>
				<view class="address-detail">{{addStr}}</view>
			</view>
		</view>
		
		<!-- 底部图片 -->
		<image class="address-img" src="../../static/cart_border@2x.png"></image>
	</view>
</template>

<script>
	import { mapState,mapMutations,mapGetters } from 'vuex'
	export default {
		name:"my-address",
		data() {
			return {

			};
		},
		methods:{
			...mapMutations('m_user',['setAddress']),
			async showAddress() {
			const [err,succ] = await uni.chooseAddress().catch(err=>err)
			// console.log(succ)
			if(err === null && succ.errMsg === 'chooseAddress:ok'){
				// this.address = succ
				this.setAddress(succ)
			}
			}
		},
		computed:{
			// 收货地址
			...mapState('m_user',['address']),
			...mapGetters('m_user',['addStr'])
		}
	}
</script>

<style lang="scss">
	.address{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: auto;
		.address-img{
			   display: block;
			   width: 100%;
			   height: 5px;
		}
		.address-btn{
			display: flex;
			align-items: center;
			justify-content: center;
			.btn{
				margin: 20px;
				width: 130px;
				height: 40px;
				line-height: 40px;
				color: white;
			}
		}
		.address-item{
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			margin: 5px;
			 .top{
				 display: flex;
				 flex-direction: row;
				 justify-content: space-between;
				 margin-top: 10px;
				 view{
				 	font-size: 14px;
				 }
			 }
			 .buttom{
			 	display: flex;
			 	flex-direction: row;
				margin-top: 10px;
				margin-bottom: 10px;
				view{
					font-size: 14px;
				}
				.title{
					white-space: nowrap;
					align-items: center;
				}
			 }
		}
	}
</style>